<template>
  <div class="my-header">
    <header>
      <div>
        您好!欢迎来到我们的网站!
        <ul>
          <li>
            设为首页
            <span>|</span>
          </li>
          <li>
            加入收藏
            <span>|</span>
          </li>
          <li>
            联系我们
            <span>|</span>
          </li>
        </ul>
      </div>
    </header>

    <div class="logn">
      <div>
        <div class="logn_z">
          <div class="tu">
            <img src="@/assets/name.png" />
          </div>
        </div>
        <div class="logn_y">
          <div class="zi">
            <p>24小时服务热线</p>
          </div>
          <div class="tu">
            <span>
              <img src="@/assets/tel.png" />
            </span>
            <p>13935738502</p>
          </div>
        </div>
      </div>
    </div>

    <!--导航  -->
    <nav>
      <ul>
        <li @click="goto('/')">网站首页</li>
        <li @click="goto('/GaiKuang')">公司概况</li>
        <li @click="goto('/ChanPin')">产品中心</li>
        <li @click="goto('/GongCheng')">精品工程</li>
        <li @click="goto('/ZiXun')">新闻资讯</li>
        <li @click="goto('/WenTi')">常见问题</li>
        <li @click="goto('/LiuYan')">在线留言</li>
      </ul>
    </nav>

    <!-- 轮播图 -->
    <swiper
      ref="mySwiper"
      @mouseover.native="stopSwiper"
      @mouseout.native="startSwiper"
      :options="swiperOption"
    >
      <swiper-slide v-for="{ id, pic } in data.data" :key="id"
        ><img :src="`${pic}`" alt=""
      /></swiper-slide>
      <!-- 小圆点 -->
      <div class="swiper-pagination" slot="pagination"></div>
      <!-- 上下页 -->
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
      //制作配置项

      // 小圆点
      swiperOption: {
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //可以点击
        },

        //特效：slide fade cube flip cards..
        effect: "slide",
        loop: true,
        //自动滚动
        //autoplay:true,
        autoplay: {
          delay: 2000,
          disableOnInteraction: false,
        },
      },
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    goto(path) {
      this.$router.push(path)
    },
    //鼠标进入时,触发
    stopSwiper() {
      //console.log("鼠标进入..");
      //console.log('$refs:',this.$refs);
      this.$refs.mySwiper.$swiper.autoplay.stop();
    },
    //鼠标离开时,触发
    startSwiper() {
      //console.log("鼠标离开..");
      this.$refs.mySwiper.$swiper.autoplay.start();
    },

    getData() {
      const url = `slideshow`;

      this.axios.get(url).then((res) => {
        console.log(res);
        this.data = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
header {
  width: 100%;
  height: 38px;
  background: #f0f0f0;
}
header div {
  width: 1217px;
  height: 100%;
  margin: auto;
  line-height: 38px;
  font-size: 12px;
}
header ul {
  float: right;
  height: 100%;
}
header ul li {
  float: left;
  width: 65px;
  height: 14px;
  text-align: center;
}
header ul span {
  display: inline-block; /*行内块级元素：不独占一行的块级元素*/
  margin: 0px 5px;
}
.logn {
  width: 100%;
  height: 80px;
  padding-top: 30px;
}
.logn > div {
  width: 1217px;
  margin: auto;
}
.logn_z {
  float: left;
}
.logn_z .tu {
  float: left;
  width: 600px;
  height: 50px;
}
.logn_z .zi {
  float: left;
  margin-left: 3px;
  color: #1849ad;
  width: 346px;
  height: 20px;
  margin-top: 15px;
  font-size: 22px;
  font-family: 楷体;
  font-weight: 900;
}
.logn_z .zi span {
  color: #dc3733;
}
.logn_y {
  float: right;
}
.logn_y .zi {
  float: left;
  font-size: 26px;
  color: #dc3733;
  font-weight: 900;
  margin-right: 10px;
}
.logn_y .tu {
  float: left;
  width: 255px;
  height: 35px;
  border-radius: 17.5px;
  border: 1px solid #477ec6;
  font-weight: 900;
  color: #477ec6;
  position: relative;
}
.logn_y span {
  display: inline-block;
  width: 35px;
  height: 35px;
}
.logn_y .tu p {
  position: absolute;
  margin-left: 50px;
  top: 5px;
  font-size: 20px;
}

/* 导航 */
nav {
  margin-top: 20px;
  width: 100%;
  height: 57px;
  background-color: #1e61ba;
  font-size: 20px;
}
nav > ul {
  margin: 0 auto;
  width: 1217px;
  display: flex;
  justify-content: space-evenly;
}
nav > ul > li {
  width: 12.5%;
  text-align: center;
  line-height: 57px;
  color: white;
}
nav > ul > li:hover {
  background-color: red;
}

.swiper-container {
  ::v-deep .swiper-pagination-bullet {
    margin: 0 10px;
    transform: scale(2);
  }
}
</style>
